<template>
	<view>
		<view class="z-margin-32">
			<view class="sameitem">
				<view>头像</view>
				<image :src="cdn(avatar)" class="upimg" mode="aspectFill" @tap="chooseAvatar" />
			</view>
			<u-divider text=""></u-divider>
		</view>
		<view class="z-margin-32">
			<view class="sameitem">
				<view>昵称</view>
				<view class="sameitem">
					<input type="text" placeholder="请输入昵称" v-model="nickname" />
					<!-- <van-icon name="arrow" /> -->
				</view>
			</view>
			<u-divider text=""></u-divider>
		</view>
		<view class="z-radius-16 apply z-font-28 z-padding-32" @tap="save">保存</view>
	</view>
</template>

<script>
	import http from "../../utils/http"
export default {
	data() {
		return {
			avatar: '',
			nickname: ''
		};
	},
	onLoad(options) {
		this.getInfo();
	},
	methods: {
		chooseAvatar() {
			http.chooseImg(['album', 'camera'], true).then((res) => {
				this.avatar = res.data.url
			});
		},
		getInfo() {
			http.post('index/userindex', '').then((res) => {
				this.avatar = res.data.avatar,
				this.nickname = res.data.nickname
			});
		},
		save() {
			http.post(
				'index/updateuserinfo',
				{
					type: 'update',
					avatar: this.avatar,
					nickname: this.nickname
				},
				true,
				false
			).then((res) => {
				this.util.toast(res.msg);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.sameitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.upimg {
	width: 100rpx;
	height: 100rpx;
}
input {
	text-align: right;
}
.apply {
	background-color: $uni-maingreencolor;
	width: 686rpx;
	left: 5%;
	position: absolute;
	bottom: 100rpx;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
}
</style>
